<template>
  <PageBox :data="dataInfo" @searchBtn="getTbody" :maring="maring" :isRadio="isRadio" :isCheckbox="isCheckbox"
    @tableCheckboxBtn="tableCheckboxBtn" @tableRadioBtn="tableRadioBtn">
    <template #search="{ search }">
      <ElFormItemBox label="供应商" prop="supplierCode">
        <ElSelectBox :data="search" dataName="supplierCode" :options="options.supplier" />
      </ElFormItemBox>
      <ElFormItemBox label="物料类型" prop="CategoryCode">
        <ElSelectBox :data="search" dataName="CategoryCode" :options="options.goodType" />
      </ElFormItemBox>
      <ElFormItemBox label="零库存情况" prop="onlyStocked">
        <ElSelectBox :data="search" dataName="onlyStocked" :options="options.onlyStocked" />
      </ElFormItemBox>
      <ElFormItemBox label="最后出库日期" prop="">
        <ElDaysBox :data="search" :dataName="['LastOutboundDateStart', 'LastOutboundDateEnd']" />
      </ElFormItemBox>
    </template>
    <template #headR></template>
    <template #warehouseBarcodeStateName="{ row }">
      <ElTagBox :data="row.isUsed" :options="options.state" />
    </template>
    <template #warehouseBarcodeTypeName="{ row }">
      <ElTagBox :data="row.warehouseBarcodeType" :options="options.type" />
    </template>
    <template #purchaseOrderNo="{ row }">
      <PopoverTabel :title="row.purchaseOrderNo" :width="1000" :thead="[
        {
          label: '规格编号',
          prop: 'specificationCode',
          align: 'center',
          width: 100,
        },
        {
          label: '物料名称',
          prop: 'goodsName',
          align: 'left',
          width: 220,
        },
        {
          label: '规格型号',
          prop: 'specificationName',
          align: 'left',
          width: 100,
        },
        {
          label: '供应商',
          prop: 'supplierName',
          align: 'left',
          width: 200,
        },
        {
          label: '采购数量',
          prop: 'planPurchaseQuantity',
          align: 'center',
          width: 100,
        },
        {
          label: '备注',
          prop: 'purchaseDesc',
          align: 'center',
          width: null,
        },
      ]" :tbody="row.purchaseDetailsList" />
    </template>
  </PageBox>
  <ElPupFormBox :pup="pup" isBg>
    <template #default="{ form }">
      <CellBox title="基础信息" isTop>
        <FlexBox :margin="2">
          <ElFormItemBox label="规格编号" prop="specificationCode">
            <ElTooltipBox :data="form.specificationCode" />
          </ElFormItemBox>
          <ElFormItemBox label="物料名称" prop="goodsName">
            <ElTooltipBox :data="form.goodsName" />
          </ElFormItemBox>
          <ElFormItemBox label="规格型号" prop="specificationName">
            <ElTooltipBox :data="form.specificationName" />
          </ElFormItemBox>
          <ElFormItemBox label="库存总数" prop="stockQuantity">
            {{ proxy.$arrTotal(form.inventory, 'stockQuantity') }}
          </ElFormItemBox>
        </FlexBox>
      </CellBox>
      <CellBox title="物料库存" isTop>
        <TableBoxMx :data="{
          tbody: form.inventory,
          thead: [
            {
              label: '生产批号',
              prop: 'productionBatchNumber',
              align: 'center',
              width: null,
            },
            {
              label: '生产日期',
              prop: 'productionDate',
              align: 'center',
              width: null,
            },
            {
              label: '库区',
              prop: 'warehouseAreaName',
              align: 'center',
              width: null,
            },
            {
              label: '库位',
              prop: 'areaShelfName',
              align: 'center',
              width: null,
            },
            {
              label: '库存数量',
              prop: 'stockQuantity',
              align: 'center',
              width: null,
            },
          ],
        }" />
      </CellBox>
      <CellBox title="变更记录" isTop>
        <TableBoxMx :data="{
          search: pup.search,
          tbody: form.changeLog,
          thead: pup.thead,
        }" @searchBtn="getChangeLog">
          <template #search="{ search }">
            <ElFormItemBox label="日期范围" prop="">
              <ElDaysBox :data="search" :dataName="['beginTime', 'endTime']" />
            </ElFormItemBox>
          </template>
          <template #headR>
            <el-button @click="() => {
              proxy.$exportData(
                {
                  thead: pup.thead,
                  tbody: form.changeLog,
                  fileName: '物料变化日志',
                },
              );
            }">导出数据</el-button>
          </template>
          <template #changeQuantiy="{ row }">
            <span :class="{
              'text-color-success': Number(row.changeQuantiy) > 0,
              'text-color-error': Number(row.changeQuantiy) < 0
            }">
              {{ row.changeQuantiy }}
            </span>
          </template>
        </TableBoxMx>
      </CellBox>
    </template>
  </ElPupFormBox>
</template>
<script setup lang="ts">
const { proxy } = getCurrentInstance() as any;
import './pageCss.scss'; // 引入样式
import { useListComponent } from './pageTs'; // 引入逻辑
const props = withDefaults(
  defineProps<{
    isRadio?: boolean; //单选
    isCheckbox?: boolean; //多选
    maring?: number; //多选
  }>(),
  {
  },
);
const pup = reactive({
  state: false,
  typeName: 3,
  title: '物料库存',
  form: {
    inventory: [],
    changeLog: [],
  },
  thead: [
    {
      label: '操作时间',
      prop: 'createTime',
      align: 'center',
      width: 180
    },
    {
      label: '操作人员',
      prop: 'creatorName',
      align: 'center',
      width: 120
    },
    {
      label: '操作状态',
      prop: 'changeType',
      align: 'center',
      width: 120
    },
    {
      label: '关联单号',
      prop: 'associationCode',
      align: 'center',
      width: 150
    },
    {
      label: '生产批次',
      prop: 'productionBatchNumber',
      align: 'center',
      width: 140
    },
    {
      label: '生产日期',
      prop: 'productionDate',
      align: 'center',
      width: 140
    },
    {
      label: '库区库位',
      prop: 'warehouseInfo',
      align: 'center',
      width: 160
    },
    {
      label: '变更前库存',
      prop: 'afterStockQuantity1',
      align: 'center',
      width: 160
    },
    {
      label: '变更数量',
      prop: 'changeQuantiy',
      align: 'center',
      width: 160
    },
    {
      label: '变更后库存',
      prop: 'afterStockQuantity',
      align: 'center',
      width: 160
    },
    {
      label: '备注',
      prop: 'remark',
      align: 'center',
      width: null
    }
  ],
  search: {
    pageIndex: 1, //当前页码
    pageSize: 30, //每页显示数据的数量
    totalCount: 0, //总数量
    queryDataBaseFiled: '', // 关键字查询字段，空值表示查询全部
    likeWords: '', // 查询关键字，空值表示不进行过滤
    beginTime: '', // 查询时间范围起始值（建议格式：yyyy-MM-dd 或 yyyy-MM-dd HH:mm:ss）
    endTime: '', // 查询时间范围结束值
    onlySelf: 0, // 是否只查自己创建的数据：0 查所有；1 只查自己
    isShowDisabled: -1, // 是否显示禁用/作废数据：-1 所有；0 未作废；1 仅作废
    orderByFiled: '', // 排序字段名称，如 createTime、updateTime 等
    orderByType: 0, // 排序方式：0 倒序；1 升序
    //差异
    goodsCode: '', // 基础物料编码
    supplierCode: '', // 供应商编码
    warehouseCode: '', // 仓库编码
    warehouseAreaCode: '', // 库区编码
    areaShelfCode: '', // 库位编码
    isDisable: 0, // 是否禁用：0未禁用；1已禁用，-1查询全部
  },
})
const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'tableRadioBtn', row: any): void;
  (event: 'tableCheckboxBtn', arr: any): void;
}>();
//多选数据
const tableCheckboxBtn = (arr: any) => {
  emit('tableCheckboxBtn', arr);
};
//单选数据
const tableRadioBtn = (row: any) => {
  emit('tableRadioBtn', row);
};
import { getSupplier, getGoodType } from '@/utils/optionsArr.ts';
// 组件挂载后执行
onMounted(() => {
  getTbody();
  getSupplier(options, 'supplier') //获取供应商
  getGoodType(options, 'goodType') //获取物料类型
});
const { dataInfo, getTbody, options, getChangeLog } = useListComponent({
  ...props,
  pup: pup
});
</script>
